<!--
/**
 * Created by PhpStorm.
 * User: Devmc
 * Date: 2021/4/25
 * Time: 0:27
 */
-->
<template>
  <div class="service">
    <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
      <el-tab-pane label="随访记录" name="visit">
        <el-table
            border
            stripe
            :data="tableData"
            v-loading="loading">
          <el-table-column align="center" type="index" label="序号" width="64"></el-table-column>
          <el-table-column align="center" prop="visitName" label="服务名称"></el-table-column>
          <el-table-column align="center" label="服务人员">
            <template slot-scope="scope">
              {{ userName[scope.row.servicePeople] }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" label="服务状态">
            <template slot-scope="scope">
              {{ scope.row.status == '1' ? '已完成' : '未完成' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="完成时间">
            <template slot-scope="scope">
              {{ new Date(scope.row.time).format('yyyy-MM-dd hh:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="我的评价">
            <template slot-scope="scope">
              {{
                scope.row.comment && scope.row.comment.substr(0, 52)
              }}{{ scope.row.comment && scope.row.comment.length > 52 ? '...' : '' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                  :type="scope.row.comment ? 'danger' : 'primary'"
                  slot="reference"
                  size="mini"
                  @click="commentOption(!!scope.row.comment, scope.row.visitId)">
                {{ scope.row.comment ? '删除评价' : '评价' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="就诊记录" name="treatment">
        <el-table
            border
            stripe
            :data="tableData"
            v-loading="loading">
          <el-table-column align="center" type="index" label="序号" width="64"></el-table-column>
          <el-table-column align="center" prop="treatmentName" label="服务名称"></el-table-column>
          <el-table-column align="center" label="治疗类型">
            <template slot-scope="scope">
              {{ scope.row.type }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="服务人员">
            <template slot-scope="scope">
              {{ userName[scope.row.servicePeople] }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="money" label="消费"></el-table-column>
          <el-table-column align="center" label="服务状态">
            <template slot-scope="scope">
              {{ scope.row.status == '1' ? '已完成' : '未完成' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="完成时间">
            <template slot-scope="scope">
              {{ new Date(scope.row.time).format('yyyy-MM-dd hh:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="我的评价">
            <template slot-scope="scope">
              {{
                scope.row.comment && scope.row.comment.substr(0, 52)
              }}{{ scope.row.comment && scope.row.comment.length > 52 ? '...' : '' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                  :type="scope.row.comment ? 'danger' : 'primary'"
                  slot="reference"
                  size="mini"
                  @click="commentOption(!!scope.row.comment, scope.row.treatmentId)">
                {{ scope.row.comment ? '删除评价' : '评价' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>


    <!-- 分页 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-count="totalCount"
        :current-page="currentPage"
        @current-change="changePage"
        :hide-on-single-page="true"
        class="page">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "MainService",
  props: {},
  data() {
    return {
      activeName: 'visit',

      // 数据
      tableData: [],
      userName: {},

      // 分页
      loading: true,
      currentPage: 1,
      totalCount: 1,
    }
  },
  created() {

    /**
     * 获取数据
     */
    this.changePage(1);
  },
  mounted() {

  },
  methods: {
    /**
     * 切换Tab
     */
    handleTabClick() {
      // 获取数据
      this.changePage(1);
    },


    /**
     * 获取数据
     *
     * @param val
     */
    changePage(val) {
      this.currentPage = val;

      let url = this.$store.state.api + `/${this.activeName}/list?pageNum=` + this.currentPage + '&pageSize=15';

      this.axios.post(url, {
        userId: this.$store.state.userData.userId
      }).then((response) => {
        if (response.data.code == 200) {
          const tableData = response.data.data.records;
          this.totalCount = response.data.data.pages;
          this.loading = false;
          // TODO
          this.getUserName(tableData).then(() => {
            this.tableData = tableData;
          });
        }
      }).catch((error) => {
        console.log(error);
      });
    },

    /**
     * 获取发布者名字
     */
    getUserName(tableData) {
      // ID
      let ids = [];
      tableData.forEach((item) => {
        ids.push(item.userId);
        ids.push(item.servicePeople);
      });
      ids = [...new Set(ids)];

      // Axios
      let req = [];
      ids.forEach((item) => {
        req.push(this.axios.get(this.$store.state.api + '/user/getById?userid=' + item));
      });

      // 获取
      return new Promise(resolve => {
        Promise.all(req).then(response => {
          response.forEach((item) => {
            if (item.data.code == 200) {
              const data = item.data.data;
              this.userName[data.userId] = data.tuserName;
            }
          });

          resolve();
        })
      })
    },


    /**
     * 评价
     */
    commentOption(del, id) {
      new Promise(resolve => {
        // 评价
        if (!del) {
          this.$prompt('', '输入评价', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal: false,
            inputValidator: (value) => {
              if (!value) return false;
              return true;
            },
            inputErrorMessage: '评价不能为空'
          }).then(({value}) => {
            resolve(value);
          });
        }
        // 删除
        else {
          this.$confirm('确定删除评价?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            resolve();
          })
        }
      }).then((value) => {

        let body = this.activeName == 'visit' ? {
          visitId: id,
          comment: del ? "" : value
        } : {
          treatmentId: id,
          comment: del ? "" : value
        }

        this.axios.put(this.$store.state.api + `/${this.activeName}/update`, [body])
            .then((response) => {
              this.$message({
                type: response.data.data ? 'success' : 'error',
                message: response.data.data ? '修改成功！' : '修改失败！',
                duration: 2000
              });
              // 刷新数据
              this.changePage(1);
            })
            .catch((error) => {
              console.log(error);
            });

      });
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>
.service {

}
</style>